<script lang="ts" setup>
import { columns, formSchemas, searchSchemas } from './meta';

import { BasicCrud } from '@/components/crud';
import {
  deptTreeSelect,
} from '@/api/system/user';
import {
  addPost,
  delPost,
  listPost,
  updatePost,
} from '@/api/system/post';
import { useGridColumns } from '@/hooks/event/use-grid-columns';
import { computeResponsiveColumns } from '@/utils/responsive-util';
import BasicTree from '@/components/tree/index.vue';
import { useContentHeight } from '@/hooks/event/use-content-height';
import { usePageDataStore } from '@/store/modules/page-data';

defineOptions({
  name: 'PostPage',
});

/**
 * 部门选择
 */
const departmentId = ref<string | number | undefined>();
function handleDepartmentSelect(value: string | number | undefined) {
  departmentId.value = value;
}
const requestParams = computed(() => {
  return {
    deptId: departmentId.value,
  };
});
function handleDepartmentAfterFetch(data: Recordable[]) {
  usePageDataStore().set('departmentTreeData', data);
}

/**
 * 响应式列
 */
const leftSpan = 1;
const { gridInstance, gridColumns } = useGridColumns(leftSpan);
const responsiveColumns = computeResponsiveColumns(300);
const rightSpan = computed(() => {
  const remainingColumns = gridColumns.value - leftSpan;
  return remainingColumns > 0 ? remainingColumns : leftSpan;
});

const { heightStyle } = useContentHeight();
</script>

<template>
  <div>
    <NGrid ref="gridInstance" x-gap="6" y-gap="6" :cols="responsiveColumns" responsive="self" item-responsive>
      <NGi :span="leftSpan">
        <NCard content-style="padding: 12px;" :style="heightStyle">
          <BasicTree
            :request="deptTreeSelect"
            list-field="data"
            @select="handleDepartmentSelect"
            @after-fetch="handleDepartmentAfterFetch"
          />
        </NCard>
      </NGi>
      <NGi :span="rightSpan">
        <BasicCrud
          :table-columns="columns"
          :form-schemas="formSchemas"
          :search-schemas="searchSchemas"
          :request="listPost"
          :request-params="requestParams"
          :create-request="addPost"
          :modify-request="updatePost"
          :delete-request="delPost"
          key-field="postId"
        />
      </NGi>
    </NGrid>
  </div>
</template>

<style lang="less" scoped></style>
